<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>

<script type="text/babel">

    // todo 组件首字母大写
    // todo 样式 class 要用className
    // todo React 数字不需要带单位
    //todo 参数在this.props 中

    // 事件首字母小写 驼峰

    class InputText extends React.Component {
        constructor(...props) {
            super(...props)
            this.state = {text: "please input"} // todo 初始化打印的文字
            console.log(this .props)
        }

        handleChange(event) { // todo event
            this.setState({
                text: event.target.value  //
            })
        }

    // todo 刚上来加载默认值 使用defaultValue,还有defaultChecked
        render() {
            return (
                <div>
                    <input type="checkbox" defaultChecked={this.props.ischeck}/>是否接受邮件<br/>
                    username: <input type="text" onChange={this.handleChange.bind(this)}  defaultValue={this.state.text}/><br/>
                    clone username: <label>{this.state.text}</label>
                </div>
            )
        }
    }

    ReactDOM.render(
        <InputText ischeck="true" />,
        document.getElementById("example")
    )

</script>
</body>

</html>